<template>
	<div class="box">
		<div class="card-header">
			<div class="card-go-back" @click="goBack"
				@touchstart="touchablestart"
				@touchend="touchableend">
				<i class="icon njfont nj-fanhui"></i>
			</div>
			<!-- <span class="header-help">帮助</span> -->
		</div>
		<div class="card-box">
			<div class="c1 back" 
				@touchstart="c1touchstart" 
				@touchend="c1touchend">
				<div class="title-box">
					<span class="title">会员卡</span>
				</div>
				<div class="card-content">
					<div class="card-img-box">
						<img class="card-img" src="static/image/member.jpg" alt="">
						<div class="userinfo-box">
							<span>{{phone}}</span>
							<span>{{memberType}}</span>
						</div>
					</div>
					<div class="card-qr-container">
						<qr-code class="qr" :text="codeData"></qr-code>
						<img class="code_img" style="width: 1.5rem;" src="static/image/ning_logo.png" alt="">
					</div>
				</div>
				<div class="card-footer">
					<div>
						<i class="icon njfont nj-huiyuanqia"></i>
						<span>会员专享价</span>
					</div>
					<div>
						<i class="icon njfont nj-jifen1"></i>
						<span>累计积分</span>
					</div>
					<div>
						<i class="icon njfont nj-youhuiquan"></i>
						<span>使用优惠券</span>
					</div>
				</div>
			</div>
			<div class="c2 front" 
				@touchstart="c2touchstart" 
				@touchend="c2touchend">
				<div class="title-box">
					<span class="title">付款码</span>
				</div>
				<div class="qr-box">
					<div class="qr-container">
						<qr-code class="qr" :text="codeData"></qr-code>
						<img class="code_img" src="static/image/ning_logo.png" alt="">
					</div>
				</div>
				<div style='display:block'>每分钟自动刷新付款码</div>	
				<div class="code-footer">						
					<span>钱包余额 <font style="color: #e28b8b;">￥{{walletBalance}}</font> 元</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import "./index.css";
import { addClass, removeClass, $ } from "./helper.js";
import getUrlSearch from "../../utils/getUrlSearch";
import {getWalletBalance,getQRCode} from "./axios.js";
import {mapGetters} from "vuex";
import {NAVIGATE, CARDCODE_CHANGE, EXIT_WEBVIEW} from "../../config/postMessage-types";
import { Toast } from '../../utils/toast';
import VueQRCodeComponent from 'vue-qrcode-component'
export default {
	data() {
		return {
			zIndex: -1,
			state: "code",
			intervalTiming: 3000, //轮询间隔
			walletBalance: 0,
			qrMsg: "",//生成付款码的数据
			userMsg: "",//生成会员卡二维码的数据,
			touchable: true,//动画过程中不能滑动
			qrKey:'', //请求返回的二维码随机数
			codeTime:null, //循环请求的计时器
		};
	},
	computed: {
		...mapGetters("wxh", [
			"userInfo"
		]),
		phone() {
			if (this.userInfo) {
				// console.log("拿到userInfo", this.userInfo.mobile);
				return this.userInfo.mobile;
			}	
		},
		memberType() {
			return "普通会员";
		},
		//用来初始化二维码的数据
		codeData() {
			if (this.qrKey) {
				let data = {
					random:this.qrKey,
					user:'ningjiaxiansheng',
					time:new Date()
					// userId: this.userInfo.userid,
					// phone: this.userInfo.mobile,
					// vipname: "",
					// remainingscore: this.userInfo.remainingscore,
					// sessionId: localStorage.getItem("sessionId")
				}
				return JSON.stringify(data);
			}else{
				return '';

			}
		}
	},
	methods: {
		//根据url的参数决定会员卡在前还是付款码在前
		initState() {
			//现在默认是c2:付款码(code)在前
			let search = getUrlSearch();
			this.state = search.state || "code";
			//请求付款码
			clearInterval(this.codeTime)
			this.getCode()
			this.intervalCode()

			//如果url中的参数是card(会员卡)，把c1、c2顺序换一下
			if (this.state === "card") {
				let c1 = $(".c1");
				let c2 = $(".c2");
				removeClass(c1, "back");
				addClass(c1, "front");
				removeClass(c2, "front");
				addClass(c2, "back");
				//清除计时器
				clearInterval(this.codeTime)

			}
		},
		initQRMessage() {
			// let info = {
			// 	userId: this.userInfo.userid,
			// 	phone: this.userInfo.mobile,
			// 	vipname: "",
			// 	remainingscore: this.userInfo.remainingscore,
			// 	sessionId: localStorage.getItem("sessionId")
			// }
			let info = {
				state: "222"
			}
			//二维码
			this.qrMsg = JSON.stringify(info);
		},
		//c2:front, c1:back
		c2touchstart(e) {
			if (!this.touchable) return;
			this.startY = e.touches[0].pageY;
		},
		c2touchend(e) {
			let c1 = $(".c1"); //一开始在后面的那一张卡片
			let c2 = $(".c2"); //一开始在前面的那一张卡片
			this.endY = e.changedTouches[0].pageY;
			if (this.endY - this.startY > 50) {
				this.touchable = false;
				// console.log("滑动有效");
				addClass(c2, "front2back");
				addClass(c1, "back2front");
				setTimeout(() => {
					this.zIndex += 2;
					c1.style.zIndex = this.zIndex;
					//告诉RN端切换到会员卡了
					let obj = {
						type: CARDCODE_CHANGE,
						params: {
							state: "card"
						}
					}
					this.sendMsg(obj);

					//付款码请求结束
					clearInterval(this.codeTime)
					// console.log('清除计时器')
				}, 200);
				setTimeout(() => {
					this.touchable = true;
					addClass(c2, "back");
					addClass(c1, "front");
					removeClass(c2, "front");
					removeClass(c2, "front2back");
					removeClass(c1, "back");
					removeClass(c1, "back2front");
				}, 400);
			}
		},
		c1touchstart(e) {
			if (!this.touchable) return;
			this.startY = e.touches[0].pageY;
		},
		c1touchend(e) {
			let c1 = $(".c1"); //一开始在后面的那一张卡片
			let c2 = $(".c2"); //一开始在前面的那一张卡片
			this.endY = e.changedTouches[0].pageY;
			if (this.endY - this.startY > 50) {
				this.touchable = false;
				// console.log("滑动有效");
				addClass(c1, "front2back");
				addClass(c2, "back2front");
				setTimeout(() => {
					this.zIndex += 1;
					c2.style.zIndex = this.zIndex;
					//告诉RN端切换到付款码了
					let obj = {
						type: CARDCODE_CHANGE,
						params: {
							state: "code"
						}
					}
					this.sendMsg(obj);

				}, 200);
				setTimeout(() => {
					this.touchable = true;
					addClass(c1, "back");
					addClass(c2, "front");
					removeClass(c1, "front");
					removeClass(c1, "front2back");
					removeClass(c2, "back");
					removeClass(c2, "back2front");
					//付款码请求开始
					this.getCode()
					this.intervalCode()
					// console.log('开始计时器')
				}, 400);
			}
		},
		touchablestart(e) {
			e.target.style.opacity = "0.5";
		},
		touchableend(e) {
			e.target.style.opacity = "1";
		},
		//退出webview
		goBack() {
			let obj = {
				type: EXIT_WEBVIEW
			}
			this.sendMsg(obj);
		},
		//提示框
		toast(msg = "", type = "warn", duration = 1500) {
			Toast({
				message: msg,
				type, 
				duration
			});
		},
		//通知RN应用端
		sendMsg(obj) {
			window.postMessage(JSON.stringify(obj));
		},
		//初始化钱包余额
		async initWalletBallance() {
			// return new Promise(async (resolve) => {
				try {
					this.walletBalance = (await getWalletBalance()).data.data[0].availAmount;
					console.log("拿到钱包余额", this.walletBalance);
				} catch (err) {
					console.log("拿到钱包余额--->error", err.toString());
				}
				
				
				// resolve(this.walletBalance);
			// });
		},
		//请求新的二维码
		async getCode(){
			let res = await getQRCode()
			if(res.data.returnCode){
				this.qrKey = res.data.data[0].qrKey
			}
		},
		//每分钟请求一次二维码
		intervalCode(){
			this.codeTime = setInterval(()=>{
				this.getCode()
			},60000)
		}
	},
	components: {
		'qr-code': VueQRCodeComponent,
	},
	created() {
		// console.log("created--->")
		this.initWalletBallance();
	},
	mounted() {
		this.initState();
		// this.initQRMessage();
	}
};
</script>
<style scoped>


</style>


